<!-- 这是图片导航区域 -->
<template>
  <div class="card">
    <div class="left" style="height: 350px; width: 20vw">
      <img src="../assets/gg/gg1.png" alt="" />
    </div>
    <div class="left2" style="height: 350px; width: 20vw">
      <img src="../assets/gg/gg2.png" alt="" style="height: 160px;"/>
      <img src="../assets/gg/gg3.png" alt="" style="height: 160px;" />
    </div>
    <div class="right2" style="height: 350px; width: 20vw">
      <img src="../assets/gg/gg4.png" alt="" />
    </div>
    <div class="right" style="height: 350px; width: 20vw;padding:0 5px;">
      <div class="top" style="width: 18vw;height: 160px; padding: 5px 5px;">
        <img src="../assets/gg/gg5.png" alt="" />
        <img src="../assets/gg/gg6.png" alt="" />
      </div>
      <div class="bottom">
        <img src="../assets/gg/gg7.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {};
  },
  watch: {},
  computed: {},
  methods: {},
  created() {},
  mounted() {},
};
</script>
<style lang="less" scoped>
.card {
  display: flex;
  // padding: 0 30px;
  padding: 30px 0;
  margin: 0 120px;
  img {
      width: 90%;
      height: 90%;
      border-radius: 30px;
  padding: 10px;
    }
  .left img{
    // padding-right:10px;
    // margin-right: 10px;

    width: 98%;
      height: 98%;
   
    
  }
  .right2 img{
    // padding-right:10px;
    margin-right: 10px;
    width: 98%;
      height: 98%;
  
  }
  .left2 {
    
    display: flex;
    flex-direction: column;
    justify-items: center;
  }
  .right {

    .top img {
      width: 8vw;
      padding-right:10px;
      padding-left:4px;
    }
    .bottom {
      padding-top:8px ;
    }
  }
}
</style>